<template>
  <div class="resume_header">
    <span>个人简历</span>
  </div>
  <div class="resume_center">
    <!-- 用户基本信息 -->
    <div class="basic_info" v-if="!proxy.$store.state.userState.isEditUserBasicInfo">
      <img :src="avatar" class="user_avatar" :title="name" />
      <el-button class="btn_edit" v-if="!proxy.$store.state.userState.isEditUserBasicInfo" type="primary"
        @click="editBasicUserInfo()">编辑</el-button>
      <p class="user_txt user_name" v-if="name">{{name}}</p>
      <p class="user_txt">
        <span class="user_detail" v-if="gander">{{gander}}</span>
        <span class="user_detail" v-if="age" >{{age}}岁</span>
        <span class="user_detail" v-if="birthAddress">{{birthAddress}}</span>
        <span class="user_detail" v-if="graduateTime">{{graduateTime}}年应届生</span>
        <span class="user_detail" v-if="politicalOutlook">{{politicalOutlook}}</span>
      </p>
      <p class="user_txt">

        <span class="user_contact" v-if="phone" >电话：{{phone}}</span>

        <span class="user_contact" v-if="email">邮箱：{{email}}</span>
      </p>
    </div>
    <UserInfoForm v-if="proxy.$store.state.userState.isEditUserBasicInfo"></UserInfoForm>
    <!-- 用户求职状态 -->
    <div class="job_status resume_subtitle" v-if="!proxy.$store.state.userState.isEditUserJobState">
      <el-button class="btn_edit hover_btn" v-if="!proxy.$store.state.userState.isEditUserJobState" type="primary"
        @click="editJobState()">编辑</el-button>
      <p class="card_title">求职状态</p>
      <p class="job_status_state">{{proxy.$store.state.userState.userJobState}}</p>
    </div>
    <UserJobState v-if="proxy.$store.state.userState.isEditUserJobState"></UserJobState>
    <!-- 用户求职意向 -->
    <div class="job_iden resume_subtitle" v-if="!proxy.$store.state.userState.isEditUserJobIdens">
      <el-button class="btn_edit hover_btn" v-if="!proxy.$store.state.userState.isEditUserJobIdens" type="primary"
        @click="editJobIden()">编辑</el-button>
      <p class="card_title">求职意向</p>
      <p class="job_iden_title">{{title}}</p>
      <ul class="iden_ul">
        <li class="iden_li" v-if="salaryMin && salaryMax">薪资要求：
          <span>{{salaryMin}}-{{salaryMax}}元/月</span>
        </li>
        <li class="iden_li" v-if="city">期望城市：
          <span>{{city}}</span>
        </li>
        <li class="iden_li" v-if="jobNature" >工作性质：
          <span>{{jobNature}}</span>
        </li>
        <li class="iden_li" v-if="industry">期望行业：
          <span>{{industry}}</span>
        </li>

      </ul>

    </div>
    <UserJobIden v-if="proxy.$store.state.userState.isEditUserJobIdens"></UserJobIden>
    <!-- 教育经历 -->
    <div class="edu_ex resume_subtitle" v-if="!proxy.$store.state.userState.isEditUserEdu">
      <el-button class="btn_edit hover_btn" v-if="!proxy.$store.state.userState.isEditUserEdu" type="primary"
        @click="editEdu()">编辑</el-button>
      <p class="card_title">教育经历</p>
      <div class="edu_card">
        <div class="edu_name" v-if="schoolName" >{{schoolName}}</div>
        <span style="font-size: 16px; padding-left: 7px;padding-right: 7px;"  v-if="education" >{{education}}</span>
        <span style="font-size: 16px; padding-left: 7px;padding-right: 7px;" v-if="major" >{{major}}</span>
        <span style="font-size: 16px; padding-left: 7px;padding-right: 7px;" v-if="schoolTime" >{{schoolTime}}</span>
      </div>

      <p style="font-size: 16px; margin-top: 10px;" v-if="eduMajorDetail" >主修课程：{{eduMajorDetail}}</p>
    </div>
    <UserEdu v-if="proxy.$store.state.userState.isEditUserEdu"></UserEdu>
    <!-- 工作经历 -->
    <div class="job_ex resume_subtitle" v-if="!proxy.$store.state.userState.isEditUserJobEx">
      <el-button class="btn_edit hover_btn" v-if="!proxy.$store.state.userState.isEditUserJobEx" type="primary"
        @click="editJobEx()">编辑</el-button>
      <p class="card_title">工作经历</p>
      <div class="job_card">
        <p v-if="jobExTime">工作时间：{{jobExTime}}</p>
        <p v-if="jobExEnterprise">所在公司：{{jobExEnterprise}}</p>
        <p v-if="jobExLevel">工作职务：{{jobExLevel}}</p>
        <p v-if="jobExDetail">经历简介：{{jobExDetail}}</p>
      </div>
      
    </div>
    <UserJobEx v-if="proxy.$store.state.userState.isEditUserJobEx"></UserJobEx>
    <!-- 项目经历 -->
    <div class="project_ex resume_subtitle" v-if="!proxy.$store.state.userState.isEditUserProjectEx">
      <el-button class="btn_edit hover_btn" type="primary"
        @click="editProjectEx()">编辑</el-button>
      <p class="card_title">项目经验</p>
      <div class="projext_card">
        <p v-if="projectTime">完成时间：{{projectTime}}</p>
        <p v-if="projectEnterprise">所在公司：{{projectEnterprise}}</p>
        <p v-if="projectName">项目名称：{{projectName}}</p>
        <p v-if="projectDetail">经验简介：{{projectDetail}}</p>
      </div>
    </div>
    <UserProjectEx  v-if="proxy.$store.state.userState.isEditUserProjectEx"/>

    <!-- 荣誉奖项 -->
    <div class="honor_card resume_subtitle" v-if="!proxy.$store.state.userState.isEditUserHonors">
      <el-button class="btn_edit hover_btn" type="primary" @click="editHonors()">编辑</el-button>
      <p class="card_title">荣誉奖项</p>
      <ul class="userhonors" v-if="userHonors" >
        <li class="userhonor" v-for="(item,index) in userHonors" :key="index">
          {{userHonors[index]}}
        </li>
      </ul>
    </div>
    <UserHonor v-if="proxy.$store.state.userState.isEditUserHonors"/>
    <!-- 自我评价 -->
    <div class="evaluation_card resume_subtitle" v-if="!proxy.$store.state.userState.isEditUserSelfEvaluation">
      <el-button class="btn_edit hover_btn" type="primary" @click="editSelfEvaluation()">编辑</el-button>
      <p class="card_title">自我评价</p>
      <!-- <div style="font-size: 16px; padding-right: 20px; text-indent=2em;">
        {{userSelfEvaluation}}
      </div> -->
      <p v-if="userSelfEvaluati" style="font-size: 16px; padding-right: 20px; text-indent:2em;">{{userSelfEvaluati}}</p>
    </div>
    

    <UserSelfEvaluation v-if="proxy.$store.state.userState.isEditUserSelfEvaluation"></UserSelfEvaluation>
    <div class="resume_subtitle" >
    </div>
    
  </div>
</template>
<script lang='ts'>
import UserInfoForm from "./userInfo/UserInfoForm.vue"
import UserJobState from "./userInfo/UserJobState.vue"
import UserJobIden from "./userInfo/UserJobIden.vue"
import UserEdu from "./userInfo/UserEdu.vue"
import UserJobEx from "./userInfo/UserJobEx.vue"
import UserProjectEx from "./userInfo/UserProjectEx.vue"
import UserHonor from "./userInfo/UserHonor.vue"
import UserSelfEvaluation from "./userInfo/UserSelfEvaluation.vue"
import { reactive, ref, onMounted, onUnmounted, computed, getCurrentInstance, watch } from "vue"
import { useStore } from "vuex";
export default {
  name: 'UserResume',
  components: {
    UserInfoForm, UserJobState, UserJobIden, UserEdu,UserJobEx,UserProjectEx,UserHonor,UserSelfEvaluation
  },
  setup() {
    // 头像
    // const avatar=require('/public/avatar.jpg')
    const avatar = ref()
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
    const store = useStore()

    // 用户基本信息
    const userInfo = {
      name: computed(() => store.state.userState.userBasicInfo.name),
      gander: computed(() => store.state.userState.userBasicInfo.gander),
      age: computed(() => store.getters.getAge),
      birthAddress: computed(() => store.getters.getAddress),
      graduateTime: computed(() => store.getters.getGraduateTime),
      politicalOutlook: computed(() => store.state.userState.userBasicInfo.politicalOutlook),
      phone: computed(() => store.state.userState.userBasicInfo.phone),
      email: computed(() => store.state.userState.userBasicInfo.email),

    }
    // 求职意向
    const userJobIdens = store.state.userState.userJobIdens
    const userJobIden = {
      title: computed(() => userJobIdens.title),
      salaryMax: computed(() => userJobIdens.salaryMax),
      salaryMin: computed(() => userJobIdens.salaryMin),
      city: computed(() => userJobIdens.city[0] == "全国地区不限" ? userJobIdens.city[0] : userJobIdens.city[0] + userJobIdens.city[1]),
      jobNature: computed(() => userJobIdens.jobNature),
      industry: computed(() => userJobIdens.industry[1]),
    }
    // 教育经历
    const userEdu = {
      schoolName: computed(() => store.state.userState.userEdu.schoolName),
      education: computed(() => store.state.userState.userEdu.education),
      major: computed(() => store.state.userState.userEdu.major),
      schoolTime: computed(() => store.getters.getSchoolTime),
      eduMajorDetail: computed(() => store.state.userState.userEdu.eduMajorDetail)
    }
    // 工作经历
    const userJobEx = {
      jobExTime: computed(() => store.getters.getJobEXTime),
      jobExEnterprise: computed(() => store.state.userState.userJobEx.jobExEnterprise),
      jobExLevel: computed(() => store.state.userState.userJobEx.jobExLevel),
      jobExDetail: computed(() => store.state.userState.userJobEx.jobExDetail)
    }
    // 项目经验
    const userProjectEx = {
      projectTime: computed(() => store.getters.getProjectEXTime),
      projectEnterprise: computed(() => store.state.userState.userProjectEx.projectEnterprise),
      projectName: computed(() => store.state.userState.userProjectEx.projectName),
      projectDetail: computed(() => store.state.userState.userProjectEx.projectDetail)
    }
    // 荣誉奖项
    const userHonor = {
      userHonors: computed(() => store.state.userState.userHonors)
    }
    // 自我评价
    const userSelfEvaluatio = {
      userSelfEvaluati: computed(() => store.state.userState.userSelfEvaluation)
    }


    const watchVuexAvatar = computed(() => store.state.userState.userBasicInfo.avatar)
    watch(watchVuexAvatar, (newval, oldval) => {
      avatar.value = store.state.userState.userBasicInfo.avatar
    }, { immediate: true, deep: true })


    onMounted(() => {

      userInfo

      userJobIden

      userEdu
      userJobEx
      userProjectEx
      userHonor
      userSelfEvaluatio
      // getUserAvatar()

      


    })



    const isEdit = ref(true)
    // 显示编辑用户信息页
    function editBasicUserInfo() {
      store.commit("editBasicUserInfo")
    }
    // 显示编辑求职状态页
    function editJobState() {
      store.commit("editJobState")
    }
    // 显示编辑求职意向页
    function editJobIden() {
      store.commit("editJobIden")
    }
    // 显示编辑教育经历页
    function editEdu() {
      store.commit("editEdu")
    }
    // 显示编辑工作经验页
    function editJobEx() {
      store.commit("editJobEx")
    }
    // 显示编辑工作经验页
    function editProjectEx() {
      store.commit("editProjectEx")
    }
    // 显示编辑工作经验页
    function editHonors() {
      store.commit("editHonors")
    }
    // 显示编辑工作经验页
    function editSelfEvaluation() {
      store.commit("editSelfEvaluation")
    }

    return {
      avatar,
      isEdit,
      editBasicUserInfo,
      editJobState,
      editJobIden,
      editEdu,
      editJobEx,
      editProjectEx,
      editHonors,
      editSelfEvaluation,
      ...userInfo,
      ...userJobIden,
      ...userEdu,
      ...userJobEx,
      ...userProjectEx,
      ...userHonor,
      ...userSelfEvaluatio,
      proxy
    }


  }
}
</script>
<style scoped>
/* 自我评价 */

/* 荣誉奖项 */
.userhonor {
  float: left;
  font-size: 14px;
  padding: 6px 10px;
  /* margin-left: ; */
  /* width: 120px; */
  color: #9497a1;
  border: 1px solid rgba(148, 151, 161, .3);
  border-radius: 2px;
  margin-right: 10px;
  margin-top: 15px;
}




/* 项目经验 */
.project_ex {
  height: 240px !important;
}

.projext_card {
  font-size: 16px;
  /* padding-left: 20px; */
  line-height: 22px;
}

/* 工作经历 */
.job_ex {
  height: 210px !important;
}

.job_card {
  font-size: 16px;
  /* padding-left: 20px; */
  line-height: 22px;
}

/* 编辑按钮 */
.btn_edit {
  position: absolute;
  margin-left: 750px;
}




/* 教育经历 */
.edu_ex {
  height: 180px !important;
  padding-top: 20px;
}

.edu_card {
  display: flex;
}

.edu_name {
  width: 200px;
}

/* 求职意向 */
.iden_ul {
  font-size: 16px;
}

.iden_li {
  /* background-color: rebeccapurple; */
  width: 50%;
  float: left;
  margin-top: 15px;
  margin-bottom: 5px;
}

/* 求职状态 */
.job_status{
  height: 120px !important;
}
.job_status_state {

  font-size: 16px;
}

.card_title {
  font-size: 24px;
  margin-bottom: 30px;
}

.resume_subtitle {
  padding-top: 10px;
  padding-left: 20px;
  height: 160px;
  /* background-color: #FFF; */
}


/* 简历基本信息 */
.user_contact {
  margin-left: 10px;

  margin-right: 10px;
  padding-top: 2px;
}

.user_detail {
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid rgb(191, 193, 188);
  width: 100px;
}

.user_name {
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 32px;
}

.user_txt {
  margin-bottom: 12px;
  margin-left: 125px;
}

.user_avatar {
  position: absolute;
  height: 110px;
  width: 110px;
  border-radius: 100%;
}

.basic_info {
  padding-left: 20px;
  padding-top: 30px;
  /* position: relative; */
  height: 180px;
  /* background-color: #FFF; */
}

.basic_info:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}

.resume_subtitle:hover {

  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}

.resume_subtitle:hover .hover_btn {
  display: block;
}

.hover_btn {
  display: none;
}

.resume_center {
  font-family: '微软雅黑';
  height: auto;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;

}

.btnEdit {
  width: 800px;

  display: flex;
  justify-content: flex-end;
}
</style>